<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Docker Registry UI</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.png')}}" mce_href="favicon.png" type="image/x-icon">
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Docker Registry UI</a>
                </div>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-2">
            <ul class="list-group">
                {% if activenamespace == '全部' %}
                    <a href="/" class="list-group-item active"><span class="badge">{{ allimagenumber }}</span>全部</a>
                {% else %}
                    <a href="/" class="list-group-item"><span class="badge">{{ allimagenumber }}</span>全部</a>
                {% endif %}
                {% for n in namespace -%}
                    {% if activenamespace == n %}
                        <a href="/u/{{ n }}" class="list-group-item active" id="{{ n }}"><span class="badge">{{ namespace[n] }}</span>{{ n }}</a>
                    {% else %}
                        <a href="/u/{{ n }}" class="list-group-item" id="{{ n }}"><span class="badge">{{ namespace[n] }}</span>{{ n }}</a>
                    {% endif %}
                {%- endfor %}
                <a href="#" class="list-group-item" onclick="clean();">清理仓库</a>
            </ul>
        </div>
        <div class="col-md-10">
            <ol class="breadcrumb">
                <li><a href="/">Registry</a></li>
                <li class="active">{{ registry }}</li>
            </ol>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>镜像名称</th>
                            <th>镜像地址</th>
{#                            <th>版本数</th>#}
                        </tr>
                    </thead>
                    <tbody>
                        {% for repositorie in repositories %}
                            <tr>
                                <td width="10%">
                                    <a href="#" onclick="getimagetag('/i/{{ repositorie.namespace }}/{{ repositorie.name }}');">{{ repositorie.name }}</a>
                                </td>
                                <td width="40%">{{ repositorie.addr }}</td>
{#                                <td width="30%">4</td>#}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        版本
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>更新时间</th>
                                    <th>压缩后大小</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tag">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

<div class="modal fade" id="Clean" tabindex="-1" role="dialog" aria-labelledby="DelTagLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="DelTagLabel">信息</h4>
            </div>
            <div class="modal-body">
                API暂不支持清理仓库， 请在镜像仓库中执行:<br>
                <code>registry garbage-collect /etc/docker/registry/config.yml</code>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</div>

<script type="text/javascript">
    function getimagetag(url) {
        $.getJSON(url,function(data){
            if (data.tasks == "Null"){
                ShowMsg("没有Tag");
            }
            var text ="" ;
            $.each(data.tasks,function(idx,item){
                text = text + "<tr><td width='30%'>" + item.name + "</td><td width='20%'>7 天前</td><td width='20%'>" + item.size + "</td><td><button type=\"button\" class=\"btn btn-primary btn-xs\" onClick=\"copypullcommand('"+ item.pull +"')\">PULL</button> <button type=\"button\" class=\"btn btn-danger btn-xs\" onClick=\"delimage('"+ item.del +"')\">删除</button></td></tr>"
            });
            $("#tag").html(text);
            $('#myModal').modal('show');
        });
        return false;
    }
    function delimage(url) {
        $.getJSON(url,function(data){
            {#$('#myModal').modal('hide');#}
            if(data == "Success"){
                ShowMsg("删除成功");
            }
            else {
                ShowFailure("删除成功");
            }
        });
        return false;
    }
    function copypullcommand(text) {
        window.clipboardData.setData("Text",text);
    }
    function clean(){
        $('#Clean').modal('show');
    }
</script>
<script src="{{ url_for('static', filename='js/msgbox.js')}}"></script>
</body>
</html>
